import { useRequest } from 'ahooks';
import { GetDataItemInfo, GetHeaderInfo, GetPWorkItemComInfo, GetTimQuoteSysDocInfo } from '../../api/work';
import { Button, Input, Select, Space, Table, message } from 'antd';
import { useEffect, useState } from 'react';
import { ColumnsType } from 'antd/lib/table';
import appState from '../../sotre';

const columns: ColumnsType<any> = [
  {
    title: 'No.',
    dataIndex: 'name',
    width: 40,
    align: 'center',
    render: (_, r, i) => {
      return i + 1;
    },
  },
  {
    title: '模版名称',
    dataIndex: 'HEADER_NAME',
    // width: 100,
    // align: 'center'
  },
  {
    title: '操作',
    align: 'center',
    width: 100,
    render: (_, op) => {
      return (
        <Button
          size="small"
          type="primary"
          onClick={async () => {
            const nameStr = op.FIELD_NAME + `{${op.FIELD_CODE}}`;
            await appState.factory.addEventData(nameStr);
            message.success('数据项添加成功');
          }}
        >
          插入模版
        </Button>
      );
    },
  },
];

// const options = [
//   { label: '项目SOP', value: '项目SOP' },
//   { label: '仪器SOP', value: '仪器SOP' },
//   { label: '质量手册', value: 'D060101' },
//   { label: '程序文件', value: 'D060103' },
// ];

const TopFooterView = () => {
  const getHeaderInfo = useRequest(GetHeaderInfo, { manual: true });
  useEffect(() => {
    getHeaderInfo.run(appState.pgroupId, '1');
  }, []);

  return (
    <div>
      <Table
        columns={columns}
        dataSource={getHeaderInfo.data}
        size="small"
        bordered
        loading={getHeaderInfo.loading}
        pagination={false}
      />
    </div>
  );
};

export default TopFooterView;
